<template>
    <view>
        <view class="type-area cus-page">
            <view class="com-flex com-row-center content">
                <view v-for="(item,index) in buttons" :key="index" @tap="hand(index)"
                    :class="['btn', buttons.length > 1 && index == 0 ? 'btn0' : null,  index != 0 ? 'com-m-l-46' : null]">
                    {{item}}
                </view>
            </view>
            <u-gap v-if="mixinGetSysInfo().platform == 'devtools'" height="30rpx" bgColor="transparent"></u-gap>
        </view>
        <u-gap :height="mixinGetSysInfo().platform == 'devtools' ? '150rpx' : '120rpx' " bgColor="transparent"></u-gap>
    </view>
</template>


<script>
export default {
    name:'bottomButton',
    components: {},
    props:{
        buttons: {
            type: Array,
            default: ()=>{
                return []
            }
        }
    },

    data () {
        return {}
    },

    computed: {},
    watch: {},

    mounted() {},

    methods: {
        // 点击按钮
        hand(index){
            this.$emit("hand",{index:index})
        }
    },
}
</script>


<style scoped lang='scss'>
    .cus-page{
        width: 100%;
        background: #fff;
        position: fixed;
        left: 0;
        bottom: 0;
        .content{
            height: 120rpx;
            .btn{
                // width: 670rpx;
                flex: 1;
                height: 80rpx;
                background: linear-gradient(-90deg, #C3B0FF 0%, #39E3FD 100%);
                border-radius: 40rpx;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 32rpx;
                font-weight: bold;
                color: #fff;
            }
            .btn0{
                background: #FFFFFF;
                border: 1px solid #02BDF3;
                // border-image: linear-gradient(-90deg, #C3B0FF, #39E3FD);
                border-radius: 40rpx;
                color: #02BDF3;
            }
        }
    }
</style>